<template>
  <div class="top">
    <el-form :model="newtask" ref="taskform" :rules="rules" label-width="200px">
      <el-form-item label='显示名称' prop="taskname">
        <el-input v-model='newtask.taskname' class="input"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="5">
          <el-form-item label='模块' prop="taskModule" v-model="newtask.taskModule">
            <el-select v-model='newtask.taskModule' placeholder="请选择" class="input" @change="changeValue"
                       @visible-change="taskModuleQuery">
              <el-option v-for="(item,index) in taskmodules" :key="item.taskmodule" :label="item.taskmodule"
                         :value="item.taskmoduleId">
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label='jobAction名称' prop="taskAction">
            <el-input v-model='newtask.taskAction' class="input"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label='作业参数' prop="taskParam">
        <el-input type="textarea" v-model='newtask.taskParam' class="textarea"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="5">
          <el-form-item label='作业执行时间表达式' prop="taskExpression">
            <el-input v-model='taskExpression' class="input" readonly="readonly"
                      v-bind:value="taskExpression"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item>
            <el-button type='primary' @click="makeTimeExpression">生成时间表达式</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label='备注' prop="taskRemark">
        <el-input type="textarea" v-model='newtask.taskRemark' class="textarea"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type='primary' @click="addTaskSubmit">确定</el-button>
        <el-button type='primary' @click='cancel'>取消</el-button>
      </el-form-item>

    </el-form>
    <el-dialog title='生成时间表达式' :visible.sync='makeTimeExpressionOpend'>
      <div>
        <el-tabs type="border-card" >
          <el-tab-pane label="秒">
            <div title="秒">
              <div class="line">
                <input type="radio" checked="checked" name="second" value="*" v-model="second">
                每秒 允许的通配符[, - * /]
              </div>
              <div class="line" v-model="second" id="cycleSec">
                <input ref="input" type="radio" name="second" v-model="second" v-bind:value="second1+'-'+second2">
                周期从
                <el-input-number class="num" v-model="second1" :value="1" :min="1" :max="60" size="small" :step="1"
                                 id="secondStart_0" ref="secStart"></el-input-number>
                -
                <el-input-number class="num" v-model="second2" :value="2" :min="2" :max="60" size="small" :step="1"
                                 id="secondEnd_0" ref="secEnd"></el-input-number>
                秒
              </div>
              <div class="line">
                <input type="radio" name="second" v-model="second" v-bind:value="second3+'/'+second4">
                从
                <el-input-number class="num" v-model="second3"  :min="0" :max="60" size="small" :step="1"></el-input-number>
                秒开始,每
                <el-input-number class="num" v-model="second4"  :min="1" :max="60" size="small" :step="1"></el-input-number>
                秒执行一次
              </div>
              <div class="line">
                <input type="radio" name="second" id="sencond_appoint" v-model="second" v-bind:value="secondList+','">
                指定
              </div>
              <div class="imp secondList" name="secondList">
                <input type="checkbox" value="0" v-model="secondList">00
                <input type="checkbox" value="1" v-model="secondList">01
                <input type="checkbox" value="2" v-model="secondList">02
                <input type="checkbox" value="3" v-model="secondList">03
                <input type="checkbox" value="4" v-model="secondList">04
                <input type="checkbox" value="5" v-model="secondList">05
                <input type="checkbox" value="6" v-model="secondList">06
                <input type="checkbox" value="7" v-model="secondList">07
                <input type="checkbox" value="8" v-model="secondList">08
                <input type="checkbox" value="9" v-model="secondList">09
              </div>
              <div class="imp secondList">
                <input type="checkbox" value="10" v-model="secondList">10
                <input type="checkbox" value="11" v-model="secondList">11
                <input type="checkbox" value="12" v-model="secondList">12
                <input type="checkbox" value="13" v-model="secondList">13
                <input type="checkbox" value="14" v-model="secondList">14
                <input type="checkbox" value="15" v-model="secondList">15
                <input type="checkbox" value="16" v-model="secondList">16
                <input type="checkbox" value="17" v-model="secondList">17
                <input type="checkbox" value="18" v-model="secondList">18
                <input type="checkbox" value="19" v-model="secondList">19
              </div>
              <div class="imp secondList">
                <input type="checkbox" value="20" v-model="secondList">20
                <input type="checkbox" value="21" v-model="secondList">21
                <input type="checkbox" value="22" v-model="secondList">22
                <input type="checkbox" value="23" v-model="secondList">23
                <input type="checkbox" value="24" v-model="secondList">24
                <input type="checkbox" value="25" v-model="secondList">25
                <input type="checkbox" value="26" v-model="secondList">26
                <input type="checkbox" value="27" v-model="secondList">27
                <input type="checkbox" value="28" v-model="secondList">28
                <input type="checkbox" value="29" v-model="secondList">29
              </div>
              <div class="imp secondList">
                <input type="checkbox" value="30" v-model="secondList">30
                <input type="checkbox" value="31" v-model="secondList">31
                <input type="checkbox" value="32" v-model="secondList">32
                <input type="checkbox" value="33" v-model="secondList">33
                <input type="checkbox" value="34" v-model="secondList">34
                <input type="checkbox" value="35" v-model="secondList">35
                <input type="checkbox" value="36" v-model="secondList">36
                <input type="checkbox" value="37" v-model="secondList">37
                <input type="checkbox" value="38" v-model="secondList">38
                <input type="checkbox" value="39" v-model="secondList">39
              </div>
              <div class="imp secondList">
                <input type="checkbox" value="40" v-model="secondList">40
                <input type="checkbox" value="41" v-model="secondList">41
                <input type="checkbox" value="42" v-model="secondList">42
                <input type="checkbox" value="43" v-model="secondList">43
                <input type="checkbox" value="44" v-model="secondList">44
                <input type="checkbox" value="45" v-model="secondList">45
                <input type="checkbox" value="46" v-model="secondList">46
                <input type="checkbox" value="47" v-model="secondList">47
                <input type="checkbox" value="48" v-model="secondList">48
                <input type="checkbox" value="49" v-model="secondList">49
              </div>
              <div class="imp secondList">
                <input type="checkbox" value="50" v-model="secondList">50
                <input type="checkbox" value="51" v-model="secondList">51
                <input type="checkbox" value="52" v-model="secondList">52
                <input type="checkbox" value="53" v-model="secondList">53
                <input type="checkbox" value="54" v-model="secondList">54
                <input type="checkbox" value="55" v-model="secondList">55
                <input type="checkbox" value="56" v-model="secondList">56
                <input type="checkbox" value="57" v-model="secondList">57
                <input type="checkbox" value="58" v-model="secondList">58
                <input type="checkbox" value="59" v-model="secondList">59
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="分钟">
            <div title="分钟">
              <div class="line">
                <input type="radio" checked="checked" name="min" value="*" v-model="min">
                分钟 允许的通配符[, - * /]
              </div>
              <div class="line">
                <input type="radio" name="min" v-model="min" v-bind:value="min1+'-'+min2">
                周期从
                <el-input-number class="num" v-model="min1" :value="1" :min="1" :max="60" size="small" :step="1"
                                 id="minStart_0" ref="minStart"></el-input-number>
                -
                <el-input-number class="num" v-model="min2" :value="2" :min="2" :max="60" size="small" :step="1"
                                 id="minEnd_0" ref="minEnd"></el-input-number>
                分钟
              </div>
              <div class="line">
                <input type="radio" name="min" v-model="min" v-bind:value="min3+'/'+min4">
                从
                <el-input-number class="num" v-model="min3" :value="0" :min="0" :max="60" size="small" :step="1"
                                 id="minStart_1" ref="minStart1"></el-input-number>
                分钟开始,每
                <el-input-number class="num" v-model="min4" :value="1" :min="1" :max="60" size="small" :step="1"
                                 id="minEnd_1" ref="minEnd1"></el-input-number>
                分钟执行一次
              </div>
              <div class="line">
                <input type="radio" name="min" id="min_appoint" v-model="min" v-bind:value="minList+','">
                指定
              </div>
              <div class="imp minList">
                <input type="checkbox" value="0" v-model="minList">00
                <input type="checkbox" value="1" v-model="minList">01
                <input type="checkbox" value="2" v-model="minList">02
                <input type="checkbox" value="3" v-model="minList">03
                <input type="checkbox" value="4" v-model="minList">04
                <input type="checkbox" value="5" v-model="minList">05
                <input type="checkbox" value="6" v-model="minList">06
                <input type="checkbox" value="7" v-model="minList">07
                <input type="checkbox" value="8" v-model="minList">08
                <input type="checkbox" value="9" v-model="minList">09
              </div>
              <div class="imp minList">
                <input type="checkbox" value="10" v-model="minList">10
                <input type="checkbox" value="11" v-model="minList">11
                <input type="checkbox" value="12" v-model="minList">12
                <input type="checkbox" value="13" v-model="minList">13
                <input type="checkbox" value="14" v-model="minList">14
                <input type="checkbox" value="15" v-model="minList">15
                <input type="checkbox" value="16" v-model="minList">16
                <input type="checkbox" value="17" v-model="minList">17
                <input type="checkbox" value="18" v-model="minList">18
                <input type="checkbox" value="19" v-model="minList">19
              </div>
              <div class="imp minList">
                <input type="checkbox" value="20" v-model="minList">20
                <input type="checkbox" value="21" v-model="minList">21
                <input type="checkbox" value="22" v-model="minList">22
                <input type="checkbox" value="23" v-model="minList">23
                <input type="checkbox" value="24" v-model="minList">24
                <input type="checkbox" value="25" v-model="minList">25
                <input type="checkbox" value="26" v-model="minList">26
                <input type="checkbox" value="27" v-model="minList">27
                <input type="checkbox" value="28" v-model="minList">28
                <input type="checkbox" value="29" v-model="minList">29
              </div>
              <div class="imp minList">
                <input type="checkbox" value="30" v-model="minList">30
                <input type="checkbox" value="31" v-model="minList">31
                <input type="checkbox" value="32" v-model="minList">32
                <input type="checkbox" value="33" v-model="minList">33
                <input type="checkbox" value="34" v-model="minList">34
                <input type="checkbox" value="35" v-model="minList">35
                <input type="checkbox" value="36" v-model="minList">36
                <input type="checkbox" value="37" v-model="minList">37
                <input type="checkbox" value="38" v-model="minList">38
                <input type="checkbox" value="39" v-model="minList">39
              </div>
              <div class="imp minList">
                <input type="checkbox" value="40" v-model="minList">40
                <input type="checkbox" value="41" v-model="minList">41
                <input type="checkbox" value="42" v-model="minList">42
                <input type="checkbox" value="43" v-model="minList">43
                <input type="checkbox" value="44" v-model="minList">44
                <input type="checkbox" value="45" v-model="minList">45
                <input type="checkbox" value="46" v-model="minList">46
                <input type="checkbox" value="47" v-model="minList">47
                <input type="checkbox" value="48" v-model="minList">48
                <input type="checkbox" value="49" v-model="minList">49
              </div>
              <div class="imp minList">
                <input type="checkbox" value="50" v-model="minList">50
                <input type="checkbox" value="51" v-model="minList">51
                <input type="checkbox" value="52" v-model="minList">52
                <input type="checkbox" value="53" v-model="minList">53
                <input type="checkbox" value="54" v-model="minList">54
                <input type="checkbox" value="55" v-model="minList">55
                <input type="checkbox" value="56" v-model="minList">56
                <input type="checkbox" value="57" v-model="minList">57
                <input type="checkbox" value="58" v-model="minList">58
                <input type="checkbox" value="59" v-model="minList">59
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="小时">
            <div title="小时">
              <div class="line">
                <input type="radio" checked="checked" name="hour" value="*" v-model="hour">
                小时 允许的通配符[, - * /]
              </div>
              <div class="line">
                <input type="radio" name="hour" v-model="hour" v-bind:value="hour1+'-'+hour2">
                周期从
                <el-input-number class="num" v-model="hour1" :value="0" :min="0" :max="60" size="small" :step="1"
                                 id="hourStart_0" ref="hourStart"></el-input-number>
                -
                <el-input-number class="num" v-model="hour2" :value="2" :min="2" :max="60" size="small" :step="1"
                                 id="hourEnd_1" ref="hourEnd"></el-input-number>
                小时
              </div>
              <div class="line">
                <input type="radio" name="hour" v-model="hour" v-bind:value="hour3+'/'+hour4">
                从
                <el-input-number class="num" v-model="hour3" :value="0" :min="0" :max="60" size="small" :step="1"
                                 id="hourStart_1" ref="hourStart1"></el-input-number>
                小时开始,每
                <el-input-number class="num" v-model="hour4" :value="1" :min="1" :max="60" size="small" :step="1"
                                 id="hourEnd_1" ref="hourEnd1"></el-input-number>
                小时执行一次
              </div>
              <div class="line">
                <input type="radio" name="hour" id="hour_appoint" v-model="hour" v-bind:value="hourList+','">
                指定
              </div>
              <div class="imp hourList">
                AM:
                <input type="checkbox" value="0" v-model="hourList">00
                <input type="checkbox" value="1" v-model="hourList">01
                <input type="checkbox" value="2" v-model="hourList">02
                <input type="checkbox" value="3" v-model="hourList">03
                <input type="checkbox" value="4" v-model="hourList">04
                <input type="checkbox" value="5" v-model="hourList">05
                <input type="checkbox" value="6" v-model="hourList">06
                <input type="checkbox" value="7" v-model="hourList">07
                <input type="checkbox" value="8" v-model="hourList">08
                <input type="checkbox" value="9" v-model="hourList">09
                <input type="checkbox" value="10" v-model="hourList">10
                <input type="checkbox" value="11" v-model="hourList">11
              </div>
              <div class="imp hourList">
                PM:
                <input type="checkbox" value="12" v-model="hourList">12
                <input type="checkbox" value="13" v-model="hourList">13
                <input type="checkbox" value="14" v-model="hourList">14
                <input type="checkbox" value="15" v-model="hourList">15
                <input type="checkbox" value="16" v-model="hourList">16
                <input type="checkbox" value="17" v-model="hourList">17
                <input type="checkbox" value="18" v-model="hourList">18
                <input type="checkbox" value="19" v-model="hourList">19
                <input type="checkbox" value="20" v-model="hourList">20
                <input type="checkbox" value="21" v-model="hourList">21
                <input type="checkbox" value="22" v-model="hourList">22
                <input type="checkbox" value="23" v-model="hourList">23
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="日">
            <div title="日">
              <div class="line">
                <input type="radio" checked="checked" name="day" value="*" v-model="day">
                日 允许的通配符[, - * / L W]
              </div>
              <div class="line">
                <input type="radio" name="day" value="?" v-model="day">
                不指定
              </div>
              <div class="line">
                <input type="radio" name="day" v-model="day" v-bind:value="day1+'-'+day2">
                周期从
                <el-input-number class="num" v-model="day1" :value="1" :min="1" :max="31" size="small" :step="1"
                                 id="dayStart_0" ref="dayStart"></el-input-number>
                -
                <el-input-number class="num" v-model="day2" :value="2" :min="2" :max="31" size="small" :step="1"
                                 id="dayEnd_0" ref="dayEnd"></el-input-number>
                日
              </div>
              <div class="line">
                <input type="radio" name="day" v-model="day" v-bind:value="day3+'/'+day4">
                从
                <el-input-number class="num" v-model="day3" :value="1" :min="1" :max="31" size="small" :step="1"
                                 id="dayStart_1" ref="dayStart1"></el-input-number>
                日开始,每
                <el-input-number class="num" v-model="day4" :value="2" :min="1" :max="31" size="small" :step="1"
                                 id="dayEnd_1" ref="dayEnd1"></el-input-number>
                天执行一次
              </div>
              <div class="line">
                <input type="radio" name="day" v-model="day" v-bind:value="day5+'W'">
                每月
                <el-input-number class="num" v-model="day5" :value="1" :min="1" :max="31" size="small" :step="1"
                                 id="dayStart_2" ref="dayStart2"></el-input-number>
                号最近的那个工作日
              </div>
              <div class="line">
                <input type="radio" name="day" value="L" v-model="day">
                本月最后一天
              </div>
              <div class="line">
                <input type="radio" name="day" id="day_appoint" v-model="day" v-bind:value="dayList+','">
                指定
              </div>
              <div class="imp dayList">
                <input type="checkbox" value="1" v-model="dayList">1
                <input type="checkbox" value="2" v-model="dayList">2
                <input type="checkbox" value="3" v-model="dayList">3
                <input type="checkbox" value="4" v-model="dayList">4
                <input type="checkbox" value="5" v-model="dayList">5
                <input type="checkbox" value="6" v-model="dayList">6
                <input type="checkbox" value="7" v-model="dayList">7
                <input type="checkbox" value="8" v-model="dayList">8
                <input type="checkbox" value="9" v-model="dayList">9
                <input type="checkbox" value="10" v-model="dayList">10
                <input type="checkbox" value="11" v-model="dayList">11
                <input type="checkbox" value="12" v-model="dayList">12
                <input type="checkbox" value="13" v-model="dayList">13
                <input type="checkbox" value="14" v-model="dayList">14
                <input type="checkbox" value="15" v-model="dayList">15
                <input type="checkbox" value="16" v-model="dayList">16
              </div>
              <div class="imp dayList">
                <input type="checkbox" value="17" v-model="dayList">17
                <input type="checkbox" value="18" v-model="dayList">18
                <input type="checkbox" value="19" v-model="dayList">19
                <input type="checkbox" value="20" v-model="dayList">20
                <input type="checkbox" value="21" v-model="dayList">21
                <input type="checkbox" value="22" v-model="dayList">22
                <input type="checkbox" value="23" v-model="dayList">23
                <input type="checkbox" value="24" v-model="dayList">24
                <input type="checkbox" value="25" v-model="dayList">25
                <input type="checkbox" value="26" v-model="dayList">26
                <input type="checkbox" value="27" v-model="dayList">27
                <input type="checkbox" value="28" v-model="dayList">28
                <input type="checkbox" value="29" v-model="dayList">29
                <input type="checkbox" value="30" v-model="dayList">30
                <input type="checkbox" value="31" v-model="dayList">31
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="月">
            <div title="月">
              <div class="line">
                <input type="radio" checked="checked" name="mouth" value="*" v-model="mouth">
                月 允许的通配符[, - * /]
              </div>
              <div class="line">
                <input type="radio" name="mouth" value="?" v-model="mouth">
                不指定
              </div>
              <div class="line">
                <input type="radio" name="mouth" v-model="mouth" v-bind:value="mouth1+'-'+mouth2">
                周期从
                <el-input-number class="num" v-model="mouth1" :value="1" :min="1" :max="12" size="small" :step="1"
                                 id="mouthStart_0" ref="mouthStart"></el-input-number>
                -
                <el-input-number class="num" v-model="mouth2" :value="2" :min="2" :max="12" size="small" :step="1"
                                 id="mouthEnd_0" ref="mouthEnd"></el-input-number>
                月
              </div>
              <div class="line">
                <input type="radio" name="mouth" v-model="mouth" v-bind:value="mouth3+'/'+mouth4">
                从
                <el-input-number class="num" v-model="mouth3" :value="1" :min="1" :max="31" size="small" :step="1"
                                 id="mouthStart_1" ref="mouthStart1"></el-input-number>
                日开始,每
                <el-input-number class="num" v-model="mouth4" :value="1" :min="1" :max="12" size="small" :step="1"
                                 id="mouthEnd_1" ref="mouthEnd1"></el-input-number>
                月执行一次
              </div>
              <div class="line">
                <input type="radio" name="mouth" id="mouth_appoint" v-model="mouth" v-bind:value="mouthList+','">
                指定
              </div>
              <div class="imp mouthList">
                <input type="checkbox" value="1" v-model="mouthList">1
                <input type="checkbox" value="2" v-model="mouthList">2
                <input type="checkbox" value="3" v-model="mouthList">3
                <input type="checkbox" value="4" v-model="mouthList">4
                <input type="checkbox" value="5" v-model="mouthList">5
                <input type="checkbox" value="6" v-model="mouthList">6
                <input type="checkbox" value="7" v-model="mouthList">7
                <input type="checkbox" value="8" v-model="mouthList">8
                <input type="checkbox" value="9" v-model="mouthList">9
                <input type="checkbox" value="10" v-model="mouthList">10
                <input type="checkbox" value="11" v-model="mouthList">11
                <input type="checkbox" value="12" v-model="mouthList">12
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="周">
            <div title="周">
              <div class="line">
                <input type="radio" checked="checked" name="week" value="*" v-model="week">
                周 允许的通配符[, - * / L #]
              </div>
              <div class="line">
                <input type="radio" name="week" value="?" v-model="week">
                不指定
              </div>
              <div class="line">
                <input type="radio" name="week" v-model="week" v-bind:value="week1+'/'+week2">
                周期 从星期
                <el-input-number class="num" v-model="week1" :value="1" :min="1" :max="7" size="small" :step="1"
                                 id="weekStart_0" ref="weekStart"></el-input-number>
                -
                <el-input-number class="num" v-model="week2" :value="2" :min="2" :max="7" size="small" :step="1"
                                 id="weekEnd_0" ref="weekEnd"></el-input-number>
              </div>
              <div class="line">
                <input type="radio" name="week" v-model="week" v-bind:value="week3+'#'+week4">
                第
                <el-input-number class="num" v-model="week3" :value="1" :min="1" :max="4" size="small" :step="1"
                                 id="weekStart_1" ref="weekStart1"></el-input-number>
                周 的星期
                <el-input-number class="num" v-model="week4" :value="1" :min="1" :max="7" size="small" :step="1"
                                 id="weekEnd_1" ref="weekEnd1"></el-input-number>
              </div>
              <div class="line">
                <input type="radio" name="week" v-model="week" v-bind:value="week5+'L'">
                本月最后一个星期
                <el-input-number class="num" v-model="week5" :value="1" :min="1" :max="7" size="small" :step="1"
                                 id="weekStart_2" ref="weekStart2"></el-input-number>
              </div>
              <div class="line">
                <input type="radio" name="week" id="week_appoint" v-model="week" v-bind:value="weekList+','">
                指定
              </div>
              <div class="imp weekList">
                <input type="checkbox" value="1" v-model="weekList">1
                <input type="checkbox" value="2" v-model="weekList">2
                <input type="checkbox" value="3" v-model="weekList">3
                <input type="checkbox" value="4" v-model="weekList">4
                <input type="checkbox" value="5" v-model="weekList">5
                <input type="checkbox" value="6" v-model="weekList">6
                <input type="checkbox" value="7" v-model="weekList">7
              </div>
            </div>
          </el-tab-pane>
          <!-- <el-tab-pane label="年">
              <div title="年">
                  <div class="line">
                      <input type="radio" checked="checked" name="year" onclick="unAppoint(this)">
                      不指定 允许的通配符[, - * /] 非必填</div>
                  <div class="line">
                      <input type="radio" name="year" onclick="everyTime(this)">
                      每年</div>
                  <div class="line">
                      <input type="radio" name="year" >周期 从
                      <el-input-number class="num" v-model="year1" :value="2017" :min="1" :max="3000" size="small" :step="1"
                      id="yearStart_0"></el-input-number>
                      -
                      <el-input-number class="num" v-model="year2" :value="2018" :min="1" :max="3000" size="small" :step="1"
                      id="yearEnd_0"></el-input-number></div>
              </div>
          </el-tab-pane> -->
        </el-tabs>
      </div>
      <div class="top">
        <tr>表达式</tr>
        <table style="height: 100px;">
          <tr>
            <td>
            </td>
            <td align="center">
              秒
            </td>
            <td align="center">
              分钟
            </td>
            <td align="center">
              小时
            </td>
            <td align="center">
              日
            </td>
            <td align="center">
              月<br/>
            </td>
            <td align="center">
              星期
            </td>
            <!-- <td align="center">
                年
            </td> -->
          </tr>
          <tr>
            <td class="bds">
              表达式字段:
            </td>
            <td>
              <el-input type="text" name="v_second" readonly="readonly" v-model="second"
                        v-bind:value="second"></el-input>
            </td>
            <td>
              <el-input type="text" name="v_min" readonly="readonly" v-model="min" v-bind:value="min"></el-input>
            </td>
            <td>
              <el-input type="text" name="v_hour" readonly="readonly" v-model="hour" v-bind:value="hour"></el-input>
            </td>
            <td>
              <el-input type="text" name="v_day" readonly="readonly" v-model="day" v-bind:value="day"></el-input>
            </td>
            <td>
              <el-input type="text" name="v_mouth" readonly="readonly" v-model="mouth" v-bind:value="mouth"></el-input>
            </td>
            <td>
              <el-input type="text" name="v_week" readonly="readonly" v-model="week" v-bind:value="week"></el-input>
            </td>
            <!-- <td>
                <el-input type="text" name="v_year"  readonly="readonly" ></el-input>
            </td> -->
          </tr>
          <tr>
            <td class="bds">Cron 表达式:</td>
            <td colspan="6">
              <el-input type="text" name="cron" style="width: 100%;" id="cron"
                        v-model="cronExpression"
              ></el-input>
            </td>
          </tr>
        </table>
      </div>
      <div class="center">
        <td class="bds">
          <el-button type="primary" @click="submitExpression()">确定</el-button>
        </td>
        <td>
          <el-button type="primary" @click="cancelExpression()">取消</el-button>
        </td>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    name: 'addtask',
    data() {
      return {
        newtask: {
          taskid: '',
          taskname: '',
          taskRemark: '',
          taskModule: '',
          taskAction: '',
          taskParam: '',
          taskExpression: '',
          taskmoduleId: ''
        },
        taskmodules: [],
        makeTimeExpressionOpend: false,
        second1: 1,
        second2: 2,
        second3: 0,
        second4: 1,
        min1: 1,
        min2: 2,
        min3: 0,
        min4: 1,
        hour1: 0,
        hour2: 2,
        hour3: 0,
        hour4: 1,
        day1: 1,
        day2: 2,
        day3: 1,
        day4: 1,
        day5: 1,
        mouth1: 1,
        mouth2: 2,
        mouth3: 1,
        mouth4: 1,
        week1: 1,
        week2: 2,
        week3: 1,
        week4: 1,
        week5: 1,
        uuid: '',
        taskModule: '',
        gridDataSource: [],
        second: '*',
        min: '*',
        hour: '*',
        day: '*',
        mouth: '*',
        week: '?',
        list: [],
        secondList: [],
        minList: [],
        hourList: [],
        dayList: [],
        mouthList: [],
        weekList: [],
        taskExpression: '',
        space: ' ',
        rules: {
          taskname: [
            {required: true, trigger: 'blur', message: '名称必填'},
            {type: 'string', max: 100, trigger: 'blur', message: '名称必须小于20个字'}
          ],
          taskModule: [
            {required: true, trigger: 'change', message: '模块必填'}
          ],
          taskAction: [
            {required: true, trigger: 'blur', message: 'job名称必填'},
            {type: 'string', max: 100, trigger: 'blur', message: 'job名称必须小于20个字'}
          ],
          taskParam: [
            {required: true, trigger: 'blur', message: '作业参数必填'}
          ],
          // taskExpression: [
          //     { required: true, trigger: 'blur', message: '作业执行时间表达式必填' }
          // ],
          taskRemark: [
            {type: 'string', max: 200, trigger: 'blur', message: '备注必须小于200个字'}
          ]
        }
      };
    },
    watch: {
       second1: function() {
         this.second = this.second1 + "-" + this.second2;
       },
       second2: function() {
         this.second = this.second1 + "-" + this.second2;
       },
       second3: function() {
         this.second = this.second3 + "/" + this.second4;
       },
       second4: function() {
         this.second = this.second3 + "/" + this.second4;
       },
       secondList: function() {
         this.second = this.secondList + ",";
       },

      min1: function() {
        this.min = this.min1 + "-" + this.min2;
      },
      min2: function() {
        this.min = this.min1 + "-" + this.min2;
      },
      min3: function() {
        this.min = this.min3 + "/" + this.min4;
      },
      min4: function() {
        this.min = this.min3 + "/" + this.min4;
      },
      minList: function() {
        this.min = this.minList + ",";
      },

      hour1: function() {
        this.hour = this.hour1 + "-" + this.hour2;
      },
      hour2: function() {
        this.hour = this.hour1 + "-" + this.hour2;
      },
      hour3: function() {
        this.hour = this.hour3 + "/" + this.hour4;
      },
      hour4: function() {
        this.hour = this.hour3 + "/" + this.hour4;
      },
      hourList: function() {
        this.hour = this.hourList + ",";
      },

      day1: function() {
        this.day = this.day1 + "-" + this.day2;
      },
      day2: function() {
        this.day = this.day1 + "-" + this.day2;
      },
      day3: function() {
        this.day = this.day3 + "/" + this.day4;
      },
      day4: function() {
        this.day = this.day3 + "/" + this.day4;
      },
      dayList: function() {
        this.day = this.dayList + ",";
      },

      mouth1: function() {
        this.mouth = this.mouth1 + "-" + this.mouth2;
      },
      mouth2: function() {
        this.mouth = this.mouth1 + "-" + this.mouth2;
      },
      mouth3: function() {
        this.mouth = this.mouth3 + "/" + this.mouth4;
      },
      mouth4: function() {
        this.mouth = this.mouth3 + "/" + this.mouth4;
      },
      mouthList: function() {
        this.mouth = this.mouthList + ",";
      },

      week1: function() {
        this.week = this.week1 + "/" + this.week2;
      },
      week2: function() {
        this.week = this.week1 + "/" + this.week2;
      },
      week3: function() {
        this.week = this.week3 + "#" + this.week4;
      },
      week4: function() {
        this.week = this.week3 + "#" + this.week4;
      },
      weekList: function() {
        this.week = this.weekList + ",";
      }

    },
    computed: {
      cronExpression() {
        return this.second + this.space + this.min + this.space + this.hour + this.space + this.day + this.space + this.mouth + this.space + this.week;
      }
    },
    // 页面激活
    activated() {
      let taskid = this.$route.query.id;
      if (taskid) {
        this.$http.get('/TaskPlatform/TaskConfig/GetTaskConfig', {
          params: {
            taskid: taskid
          }
        }).then((response) => {
          if (response.data.isSuccess) {
            this.newtask = response.data.taskConfigList[0];
            console.log(this.newtask);
            this.newtask = {
              taskid: this.newtask.taskid,
              taskname: this.newtask.taskname,
              taskRemark: this.newtask.taskRemark,
              taskModule: this.newtask.taskModule,
              taskmoduleId: this.newtask.taskmoduleId,
              taskAction: this.newtask.taskAction,
              taskParam: this.newtask.taskParam,
              taskExpression: this.newtask.taskExpression
            };
            this.taskExpression = this.newtask.taskExpression;
            console.log(this.taskExpression);
          }
        });
      }
    },
    methods: {
      /**
       * 查询模块名
       */
      taskModuleQuery() {
        this.$http.get('/TaskPlatform/TaskConfig/GetAllTaskModuleConfig').then((response) => {
          if (response.data.isSuccess) {
            this.taskmodules = response.data.taskModuleList;
          }
        });
      },
      /**
       * 生成随机taskid
       */
      getnewtaskid() {
        let s = [];
        let hexDigits = '0123456789abcdef';

        for (let i = 0; i < 36; i++) {
          s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
        }
        // bits 12-15 of the time_hi_and_version field to 0010
        s[14] = '4';
        // bits 6-7 of the clock_seq_hi_and_reserved to 01
        s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1);
        s[8] = s[13] = s[18] = s[23] = '-';

        let uuid = s.join('');
        console.log(uuid);
        return uuid;
      },
      /**
       * 获取模块ID
       */
      changeValue(value) {
        this.newtask.taskmoduleId = value;
        let obj = {};
        obj = this.taskmodules.find((item) => {
          return item.taskmoduleId === value;
        });
        this.newtask.taskModule = obj.taskmodule;
      },
      /**
       * 新增任务提交
       */
      addTaskSubmit() {
        if (this.newtask.taskid !== '') {
          this.newtask.taskid = this.newtask.taskid;
        } else {
          this.newtask.taskid = this.getnewtaskid();
        }
        this.$refs.taskform.validate((valid) => {
          if (valid) {
            this.$http.post('/TaskPlatform/TaskConfig/SaveTaskConfig',
              {
                taskid: this.newtask.taskid,
                taskname: this.newtask.taskname,
                taskRemark: this.newtask.taskRemark,
                taskModule: this.newtask.taskModule,
                taskAction: this.newtask.taskAction,
                taskParam: this.newtask.taskParam,
                taskExpression: this.taskExpression,
                taskmoduleId: this.newtask.taskmoduleId
              }).then((response) => {
              if (response.data.isSuccess) {
                this.$message({
                  message: '操作成功!',
                  type: 'success'
                });
                if (response.data) {
                  this.gridDataSource.push(response.data.newtask);
                }
                this.newtask = {
                  taskid: '',
                  taskname: '',
                  taskRemark: '',
                  taskModule: '',
                  taskAction: '',
                  taskParam: '',
                  taskExpression: '',
                  taskmoduleId: ''
                };
                this.addTaskDislogOpened = false;
                this.cancel();
              } else {
                this.$message({
                  message: '数据提交出现错误,请稍后重试!',
                  type: 'error'
                });
              }
            }).catch(() => {
              this.$message({
                message: '数据提交出现错误,请稍后重试!',
                type: 'error'
              });
            });
          } else {
            return false;
          }
        });
      },
      /**
       * 点击取消返回上一界面
       */
      cancel() {
        this.$router.push({path: '/TaskPlatform/task'});
      },
      /**
       * 生成时间表达式
       */
      makeTimeExpression() {
        this.makeTimeExpressionOpend = true;
      },
      /**
       * 提交表达式
       */
      submitExpression() {
        this.taskExpression = this.cronExpression;
        this.makeTimeExpressionOpend = false;
      },
      /**
       * 生成时间表达式取消
       */
      cancelExpression() {
        this.makeTimeExpressionOpend = false;
      }
    }
  };
</script>
<style>
  .title {
    width: 100%;
    padding: 15px;
    border: 1px solid gray;
    margin: 0px;
    background: GhostWhite;
  }

  .input {
    width: 200px;
  }

  .bds {
    width: 100px;
  }

  .num {

    width: 100px;
  }

  .textarea {
    width: 600px;
  }

  .top {
    margin-top: 35px;
  }

  .center {
    margin: auto;
    margin-top: 35px;
    width: 20%;
  }
</style>
